<template>
  <div class="zqty_bodys" style="padding-top:20px;border:0px solid blue;" :style="{'height':(divAutoHeight-180)+'px','width':(divAutoWidth - 150)+'px'}" >
    <div  style="border:0px solid green;"  :style="{'height':(divAutoHeight-180)+'px','width':(divAutoWidth-170)+'px','margin-left':'20px'}" >

    <!-- 查询 -->
    <el-popover placement="bottom-start" width="820"  trigger="click">
      <el-form :inline="true" label-width="90px" :model="search"  class="search-panle">
        <el-form-item label="登记号" ><el-input v-model="search.registerNo" ></el-input></el-form-item>
        <el-form-item label="身份证号" ><el-input v-model="search.idNo"></el-input></el-form-item>
        <el-form-item label="患者档案号" ><el-input v-model="search.cardId"></el-input></el-form-item>
        <el-form-item label="分配机号"><el-select v-model="search.macCode"><el-option value="" label="【空】"></el-option><el-option v-for="item in machineCodeData" :key="item.id" :value="item.id" :label="item.name"></el-option></el-select></el-form-item>
        <el-form-item label="登记时间" ><el-date-picker v-model="search.time"  type="daterange"   range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
        <el-button type="primary" @click="searchClick">提交</el-button>
      </el-form>
      <el-button slot="reference" type="primary">查询</el-button>
     
    </el-popover>
    <!-- 表格 -->
    <!-- <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;"  v-loading="loading">
      <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="registerIdx" label="登记序号" sortable min-width="110"></el-table-column>
      <el-table-column prop="registerNo" label="登记号" sortable min-width="130"></el-table-column>
      <el-table-column prop="providerNoName" label="登记患者" sortable min-width="90"></el-table-column>
      <el-table-column prop="rzfsName" label="认证方式" sortable min-width="110"></el-table-column>
      <el-table-column prop="regNurseName" label="登记护士" sortable min-width="110"></el-table-column>
      <el-table-column prop="zwsh" label="接诊状态" sortable min-width="110"></el-table-column>
      <el-table-column prop="regTime" label="登记时间" sortable min-width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="80">
        <template slot-scope="scope">
          <el-button  @click="updateDialog(scope.row)" type="text" size="small">详情</el-button>
          <el-button  @click="updateDialog(scope.row)" type="text" size="small">打印小票</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
     -->
        <div class="divTop" style="border:0px solid red;" :style="{'height':(divAutoHeight-220)+'px','overflow-y':'auto'}">
          <ul>
             <li v-for="item in tableData" class="showDataLi" :key="item.id">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.createPhoto" :src="'data:image/png;base64,'+ item.createPhoto" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerNoName}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.sex}}&nbsp;{{item.age}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>登记号：{{item.registerNo}}</div>
                      <div style="margin-top:3px;">登记序号：{{item.registerIdx}}</div>
                      <div style="margin-top:3px;">登记时间：{{item.regTime}}</div>
                      <div style="margin-top:3px;">登记护士：{{item.regNurseName}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <!-- <div   v-if="item.sampleid == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已入库
                    </div>
                    <div   v-if="item.sampleid != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      未入库
                    </div> -->
                  </div>

                </div>
                <div class="showDataFoot" >
                  <div class="showDataFootLeft" @click="updateDialog(item)">
                    详情
                  </div>
                  <div class="showDataFootRight" @click="updateDialog(item)">
                    打印小票
                  </div>
                </div>
              </li>              
          </ul>
        </div>
        <div class="divfooter">
           <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
    
    <!-- 详情 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" width="80%" top="60px"  :close-on-click-modal="false" >
      <div :style="{'height':(tableHeight-90)+'px','overflow-y':'auto'}">
        <el-row :gutter="24" class='noMargin'>
        <el-col :span="11" class="text-center">
            <p>建档照片</p>
            <img :src="'data:image/png;base64,'+ dialogList.createPhoto" class="photoImage" />
        </el-col>
        <el-col :span="2"> &nbsp;</el-col>
        <el-col :span="11"  class="text-center">
            <p>登记照片</p>
            <img :src="'data:image/png;base64,'+ dialogList.regPhoto" class="photoImage"/>
        </el-col>
      </el-row>
        <h3 class="dialog-plate-title"><span>基本信息</span></h3>
        <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
          <el-form-item label="档案号"><el-input v-model="dialogList.cardId" disabled></el-input></el-form-item>
          <el-form-item label="身份证号"><el-input v-model="dialogList.idNo" disabled></el-input></el-form-item>
          <el-form-item label="姓名"><el-input v-model="dialogList.providerNoName" disabled></el-input></el-form-item>
          <el-form-item label="年龄"><el-input v-model="dialogList.age" disabled></el-input></el-form-item>
          <el-form-item label="性别"><el-input v-model="dialogList.sex" disabled></el-input></el-form-item>
          <el-form-item label="认证方式"><el-input v-model="dialogList.rzfsName" disabled></el-input></el-form-item>
          <!-- 
            <el-form-item label="照片比值"><el-input v-model="dialogList.thresholdValue" disabled></el-input></el-form-item>
          <el-form-item label="分配机器号"><el-input v-model="dialogList.machineCodeName" disabled></el-input></el-form-item>
          -->
        </el-form>
        <h3 class="dialog-plate-title"><span>登记信息</span></h3>
        <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
          <el-form-item label="登记号"><el-input v-model="dialogList.registerNo" disabled></el-input></el-form-item>
          <el-form-item label="登记序号"><el-input v-model="dialogList.registerIdx" disabled></el-input></el-form-item>
          <el-form-item label="登记时间"><el-input v-model="dialogList.regTime" disabled></el-input></el-form-item>
          <el-form-item label="登记护士"><el-input v-model="dialogList.regNurseName" disabled></el-input></el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>

</div>

</template>
<script>
import api from 'plugins/axios/api.js';
export default {
  data(){
    return {
      mainActiveName:'0',
      search:{
        registerNo:'',
        idNo:'',
        cardId:'',
        macCode:'',
        time:[]
      },
      loading:false,
      machineCodeData:[],
      tableData:[],
      dialog:{
        title:'',
        isShow:false
      },
      pagination:{
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialogList:{}
    }
  },
  computed:{
    tableHeight() {
      return this.$store.state.clientHeight - 184;
    },
    divAutoHeight() {
      return this.$store.state.clientHeight;
    },
    divAutoWidth() {
      return this.$store.state.clientWidth - 100;
    },
    autoHeight() {
      return this.$store.state.clientHeight / 2 - 55;
    },
    autoWidth() {
      return this.$store.state.clientWidth - 55;
    }
  },
  created(){
    let self = this;
    api.getMachineData().then(res=>{
      self.machineCodeData = res.content;
    })
    self.getTableData();
  },
  methods:{
    syschRecodeStatus(ins){
            let self = this;
            switch (ins.name) {
            case '1':
                // self.search.recodeStatus=1;
                // self.getData();
                break;
            case '0':
                // self.search.recodeStatus=0;
                // self.getData();
                break;   
            default:
                break;
            }
    },
    searchClick(){
      this.pagination.currentPage=1;
      this.getTableData();
    },
    getTableData(){
      let self = this;
      self.loading = true;
      let data = {
        currentPage:self.pagination.currentPage,
        pageSize: self.pagination.pageSize,
        cardId:self.search.cardId,
        idNo:self.search.idNo,
        macCode:self.search.macCode,
        registerNo:self.search.registerNo,
      };
      if(data.cardId===''&&data.idNo===''&&data.macCode===''&&data.registerNo===''&&self.search.time.length===0){
        data.startTime= self.timestampToTime(new Date(),'yy-mm-dd');
        data.endTime= self.timestampToTime(new Date(new Date().getTime() + 24*60*60*1000),'yy-mm-dd');
      }else{
        data.startTime= self.search.time.length>0?self.timestampToTime(self.search.time[0],'yy-mm-dd'):null;
        data.endTime=  self.search.time.length>0?self.timestampToTime(self.search.time[1],'yy-mm-dd'):null;
      }
      api.providerReg(data).then(res=>{
        self.loading = false;
        self.tableData= res.content.records;
        self.pagination.total = res.content.total;
      },error=>{
        self.loading = false;
      })
    },
    updateDialog(row){
      let self = this;
      self.dialog.isShow=true;
      self.dialog.title ='登记详情';
      self.dialogList= row;
    },
    handleSizeChange(size){
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
    },
    handleCurrentChange(current){
       this.pagination.currentPage=current;
    }
  }
}
</script>
<style lang="stylus" scoped>
p{
 margin-bottom 10px
}
.showDataLi{
    width:400px;
    height:200px;
    border:1px solid rgba(0,0,0,0.1);
    background: white;
    box-shadow : 0px 0px 8px rgba(216,216,216,0.9);
    float:left;
    margin-left: 10px;
    margin-top:10px;
    border-radius: 10px;
    overflow-y:hidden;
    cursor:pointer;
  }
  .showDataLi:hover{
    border:1px solid rgba(0,0,0,0.2);
    box-shadow : 0px 0px 13px rgba(0,0,0,0.3);
  }
  
  .showDataTop{
    width:398px;
    height:148px;
  }
  .showDataFoot{
    border-top:1px solid rgba(216,216,216,0.5);
    width:100%;
    height:51px;
    text-align:center;
    line-height:50px;
    background:#F9FAFC;
    font-size:14px;
    color:rgba(0,0,0,0.5);
  }
  .showDataFootLeft,.showDataFootRight{
    width:50%;
    height:51px;
    color:black;
    float:left;
    margin-left:0px;
  }
  .showDataFootLeft:hover,.showDataFootRight:hover{
     color: $theme-color;
      background:rgba(216,216,216,0.4);
      font-weight:bolder;
  }
  .showDataFoot:hover{
    color: $theme-color;
  }

.showDataTopLeft{
    border:0px solid blue;
    width:80px;
    height:82px;
    float:left;
    margin-left:10px;
    margin-top:20px;
    border-radius: 42px;
    overflow-y:hidden;
  }
  .showDataImg{
    width:100%;
    margin-top:-2px;
  }
  .showDataTopCenter{
    width:210px;
    height:100px;
    float:left;
    margin-left:10px;
    margin-top:20px;
  }
  .showDataTopRight{
    width:80px;
    height:148px;
    float:left;
    text-align:center;
  }
  .divTop{
    width:100%;
  }
  .divfooter{
    width:60%;
    height:50px;
    margin-top:30px;
  }

</style>


